<template>
  <div class="sort-wrap">
    <div style="padding: 0 21px; margin-left: 4px">综合</div>
    <div style="padding: 0 21px;">
      <span class="sort-name active-name">销量</span
      ><i class="icon-sort active-down"></i>
    </div>
    <div style="padding: 0 21px;">
      <span class="sort-name">转发</span><i class="icon-sort active-up"></i>
    </div>
    <div style="margin-left: 70px">仅看已加价</div>
  </div>
</template>

<script>
export default {
  name: 'sortTab',
  props: {
    curTabId: {
      type: Number,
      default: 1
    },
    sortType: {
      type: String,
      default: 'desc'
    }
  },
  data() {
    return {
      tabs: [
        { tabId: 1, name: '综合' },
        { tabId: 2, name: '销量' },
        { tabId: 2, name: '转发' },
        { tabId: 3, name: '仅看已加价' }
      ]
    };
  },
  methods: {
    handleSort() {
      this.$app.statistic({
        actionType: 'click',
        spm: '1041.1039',
        mainProperties: {
          sort_name: ''
        },
        currentProperties: {
          tab_name: ''
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.sort-wrap {
  width: 100%;
  height: 0.84rem;
  background-color: #fff;
  font-size: 0.26rem;
  display: flex;
  align-items: center;
  color: #666666;

  .sort-name {
    line-height: normal;
  }

  .active-name {
    color: #e62525;
  }

  .icon-sort {
    display: inline-block;
    width: 0.2rem;
    height: 0.2rem;
    background: url('../../../assets/addPrice/icon-sort-default.png') no-repeat;
    background-size: 100% 100%;
  }

  .active-down {
    background: url('../../../assets/addPrice/icon-sort-down.png') no-repeat;
    background-size: 100% 100%;
  }

  .active-up {
    background: url('../../../assets/addPrice/icon-sort-up.png') no-repeat;
    background-size: 100% 100%;
  }
}
</style>
